<template>
	<div style="margin: 20px 0;">
		<el-row :gutter="20">
			<el-col :span="24">
				<!-- 描述列表 -->
				<el-descriptions :title="data.formData.appName" :column="1" size="large" border style="margin-top: -10px">
					<el-descriptions-item>
						<template #label>
							<div>
								<el-icon style="margin-right: 8px"> <office-building /> </el-icon>建设单位：
							</div>
						</template>
						{{ data.formData.builderName }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div>
								<el-icon style="margin-right: 8px"> <ele-ChatLineSquare /> </el-icon>应用描述：
							</div>
						</template>
						{{ data.formData.appDesc }}
					</el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div>
                <el-icon style="margin-right: 8px"> <ele-ChatLineSquare /> </el-icon>应用调用白名单地址：
              </div>
            </template>
            {{ data.formData.exhibitUrl }}
          </el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div>
								<el-icon style="margin-right: 8px"> <iphone /> </el-icon>单位联系人手机号码：
							</div>
						</template>
						{{ data.formData.appBuilderPhone }}
					</el-descriptions-item>
					<!-- <el-descriptions-item>
          <template #label>
            <div>
              <el-icon style="margin-right: 8px">
                <tickets />
              </el-icon>单位联系人邮箱：
            </div>
          </template>
          <el-tag size="small">{{ data.formData.appBuilderEmail }}</el-tag>
        </el-descriptions-item> -->
					<el-descriptions-item>
						<template #label>
							<div>
								<el-icon style="margin-right: 8px"> <ele-Paperclip /> </el-icon>附件：
							</div>
						</template>
						<a :href="data.appAppendixShowIdArray[0]">{{ data.appAppendixNameArray[0] }}</a>
						<div v-if="data.appAppendixShowIdArray.length > 1" style="display: inline-block; margin-left: 4px; float: right">
							<el-popover placement="top-start" :width="400" trigger="hover">
								<template #reference>
									<el-icon size="14px" color="#1890ff">
										<ele-MoreFilled />
									</el-icon>
								</template>
								<div v-for="(item, index) in data.appAppendixNameOtherArray" :key="index">
									<div v-for="(item2, index) in data.appAppendixShowIdOtherArray" :key="index">
										<a :href="item2">{{ item }}</a>
									</div>
								</div>
							</el-popover>
						</div>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div>
								<el-icon style="margin-right: 8px"> <ele-EditPen /> </el-icon>审核意见：
							</div>
						</template>
						<zh-form-input prop="authRemarks" show-word-limit type="textarea" maxlength="255" placeholder="单击输入审核意见(可选)" v-model="formData.authRemarks" :span="24" />
					</el-descriptions-item>
				</el-descriptions>
				<!-- 操作按钮组 -->
				<div class="btn">
					<el-button type="primary" class="btnStyle" @click="auditConfirm('1')">审核通过</el-button>
					<el-button type="danger" class="btnStyle" @click="auditConfirm('2')">审核不通过</el-button>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="auditMain">
import { Iphone, OfficeBuilding } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// ------------------接收传入参数(组件)-------------------
let fromAppAuditInfo = defineProps({
	auditMainInfo: Object,
});
// ---------------------初始化----------------------------
onMounted(() => {
	getAuditInfo();
});
// 监听父组件数据传入
watch(fromAppAuditInfo, () => {
	getAuditInfo();
});
// ------------------内部变量定义-------------------------
// 子传父组间数据传输方法定义
const emit = defineEmits(['changeAuditDialog']);
// 主数据对象
const data = reactive({
	// 表单数据
	formData: {} as any,
	appAppendixNameArray: [] as Array<any>,
	appAppendixShowIdArray: [] as Array<any>,
	appAppendixNameOtherArray: [] as Array<any>,
	appAppendixShowIdOtherArray: [] as Array<any>,
	// 放重复提交标记
	submitFlag: true as boolean,
});
//表单定义
let formData = reactive({
	authRemarks: '' as string,
});
// ------------------定义调用方法-------------------------
// 接收传入数据
const getAuditInfo = () => {
	data.formData = fromAppAuditInfo.auditMainInfo;
	splitAppAppendix();
};
//根据逗号分隔附件链接
const splitAppAppendix = () => {
	data.appAppendixNameArray = [];
	data.appAppendixShowIdArray = [];
	data.appAppendixNameOtherArray = [];
	data.appAppendixShowIdOtherArray = [];
	if (data.formData.appAppendixName) {
		data.appAppendixNameArray = data.formData.appAppendixName.split(',');
		data.appAppendixShowIdArray = data.formData.appAppendixShowId.split(',');
		data.appAppendixNameOtherArray = data.appAppendixNameArray.slice(1);
		data.appAppendixShowIdOtherArray = data.appAppendixShowIdArray.slice(1);
	}
};
// 审核弹窗显示状态切换
const changeDialog = () => {
	const changeAuditDialog = false;
	emit('changeAuditDialog', changeAuditDialog);
};
// 审核接口
const audit = (authStatus: string) => {
	let params = {
		busNo: data.formData.busNo,
		appInfoId: data.formData.appInfoId,
		authStatus: authStatus,
		authRemarks: formData.authRemarks,
    exhibitUrl:data.formData.exhibitUrl,
	};
	$api.common.send.post('appInfo0014', params).then(() => {
		data.submitFlag = false;
		// 信息提示
		ElMessage({
			type: 'success',
			message: '操作成功',
		});
		// 改变审核弹窗显示状态
		changeDialog();
	});
};
// 审核
const auditConfirm = (authStatus: any) => {
	if (data.formData.authStatus === '0') {
		ElMessageBox.confirm(authStatus === '1' ? '是否确定审核通过?' : '是否确定审核不通过?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(() => {
			// 执行审核
			if (data.submitFlag) {
				audit(authStatus);
			}
		});
	}
};
</script>

<style scoped>
div/deep/ .el-descriptions {
	width: 50vw;
	margin: 50px auto;
}
div/deep/ .el-descriptions__label.el-descriptions__cell.is-bordered-label {
	width: 14vw;
}
.btn {
	display: flex;
	justify-content: flex-end;
	padding-right: 40px;
}
.btnStyle {
	width: 100px;
}
:deep .el-textarea {
	--el-input-border-color: #ffffff !important;
}
</style>
